<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      {{num1}} + {{num2}} = {{sum1()}}
      <hr >
      {{num1}} + {{num2}} = {{sum2}}
      <hr >
      <input type="text" v-model="firstName1">
      <input type="text" v-model="lastName1">
      - {{name1()}}
      <hr >
      <input type="text" v-model="firstName2">
      <input type="text" v-model="lastName2">
      - {{name2}}
      <hr >
      <input type="text" v-model="firstName3">
      <input type="text" v-model="lastName3">
      - {{name3}}
      <hr >
      <input type="text" v-model="title"><br>
      {{title}} - {{title.split("").reverse().join("")}}
    </div>
	</body>
  <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    // console.log(Vue)
    // 当一个数据的来源,需要逻辑计算或处理时,建议使用计算属性,定义数据变量
    // 如果需要监听一个数据的变化,当这个数据变化时,进行后续的逻辑操作,需要使用watch选项,开启一个数据监听
    var vm = new Vue({
      el:"#app",
      data:{
        title:"hello Vue",
        num1:5,
        num2:7,
        firstName1:"",
        lastName1:"",
        firstName2:"",
        lastName2:"",
        firstName3:"",
        lastName3:"",
        name3:""
      },
      methods:{
        sum1(){
          return this.num1 + this.num2
        },
        name1(){
          return this.firstName1 + this.lastName1;
        }
      },
      computed:{
        sum2(){
          return this.num1 + this.num2
        },
        name2(){
          return this.firstName2 + this.lastName2;
        }
      },
      watch:{
        firstName3(newVal, oldVal){
          this.name3 = newVal + this.lastName3;
        },
        lastName3(newVal, oldVal){
          this.name3 = this.firstName3 + newVal;
        }
      }
    })
    
    
    
    
  </script>
</html>
